// 问答列表页面
// 引入样式
import style from  './questionDetail.less'
import React  from 'react'
// store相关
import useStore from '@/context/useStore'
import {observer} from 'mobx-react-lite'
// 引入ul组件
import { DownOutlined } from '@ant-design/icons';
import { List,Button ,Input,Select,Form} from 'antd';
const { Search } = Input;
const { Option } = Select;
import {MessageOutlined} from '@ant-design/icons'
// 引入状态 ,监听状态改变
import {useState , useEffect} from 'react'
// 使用多个类名的依赖包
// import classNames from 'classnames'
// 引入markdown插件
import Editor from 'for-editor'
import { addQuestion, getProList, getQuestionList, getTask } from '@/services/modules/question';
import { IPro1 } from '@/utils/interface';
import {IRouteComponentProps} from 'umi'
// import { render } from 'react-dom';


interface IPro {
    name:string,
    value:string
}
let judgeType = (typeNum:string)=>{  //根据返回typeNum来判断其类型
    switch(typeNum){
        case '0':
            return '实训'
        case '4':
            return '答辩'
        case '1':
            return '面试'
        case '2':
            return '工作'
        case '3':
            return '其他'
        case '5':
            return '我得回答' 
    }
}
const typeList = [   //渲染类型筛选列表
    {
        name:'全部',
        type:''
    },
    {
        name:'实训',
        type:'0'
    },
    {
        name:'答辩',
        type:'4'
    },
    {
        name:'面试',
        type:'1'
    },
    {
        name:'工作',
        type:'2'
    },
    {
        name:'其它',
        type:'3'
    },
    {
        name:'我的问答',
        type:'5'
    }
]


const QuestionDetail:React.FC<IRouteComponentProps> = (props)=>{
  
    
    let {question} = useStore() //引入仓库
    // 定义状态
    let [type,setType] =useState('')   //类型
    let [quality,setQuality] =useState('') //仅看精品
    let [authentication,setAuthentication] =useState('') //仅看教师认证答案
    let [questionTitle,setQuestionTitle] =useState('') //搜索框关键词
    let [isView,setIsView] =useState(false) //搜索框关键词
    let [proList,setProList] = useState<IPro1[]>([]) //选择项目的 下拉列表
    let [taskList,setTaskList] = useState<IPro1[]>([]) //选择任务的 下拉列表
    let [labels,setLabels] = useState<string[]>([]) //新增问题时 添加的标签
    let [pageNum,setPageNum] = useState(1) //当前展示的页数
    let [inputValue,setInputValue] = useState('') //提问时添加标贴的输入框
    let [typeNum,setTypeNum] = useState('0') //选择问题类型的下拉框
    let [allView,setViewAll] = useState(false) //是否点击了查看更多按钮
    // useEffect(()=>{
    //     question.getQuestionList(type,quality,authentication,questionTitle)
    // },[])
    // 选择了类型以后，请求项目下拉列表
    const [form] = Form.useForm();
    const renderInput = (typeNum:string)=>{
        switch(typeNum){
            case '0':
                return      <Select
                                
                                id='a1'
                                style = {{width:'200px'}}
                                placeholder='请选择项目'
                                onChange={(e)=>{projectChange(e as string)
                                }}
                                allowClear
                            >
                            {
                                proList.map((item,index)=>{
                                    return <Option value = {item.value} key = {index}>
                                        {item.name}
                                    </Option>
                                })
                            }
                            </Select>
                        
                
            case '1':
                return <Input value=''  name='sdfkl' id='a2' defaultValue='' placeholder='公司'/>
            case '3':
                return <Input value=''  name='fnan' id='a3' defaultValue='' placeholder='其他'/>
            case '5':
                return <Input value=''  name='kaf' id='a4' defaultValue='' placeholder='工作详情'/>
        }
    }
    const renderInput2 = (typeNum:string)=>{
        switch(typeNum){
            case '0':
                return <Select
                            style = {{width:'200px'}}
                            placeholder='请选择任务'
                            // onChange={}
                            allowClear
                        >
                            {
                                
                                taskList.map((item,index)=>{
                                        return <Option value = {item.value} key = {index}>
                                            {item.name}
                                        </Option>
                                    })
                                
                            }
                        </Select>
            case '1':
                return <Input defaultValue='' placeholder='岗位'/>
            case '3':
                return <></>
            case '5':
                return <></>
        }
    }
    const onSelectChange = (value:string)=>{
        if(value == '0'){
             getProList().then(ok=>{
                 setProList(ok.data)
             })
        }  
     }
     const onFinish = (values: any) => {  //点击发布按钮时触发
        addQuestion(values.type,values.text1,values.text2,values.questionTitle,values.questionContent,labels).then((res)=>{
            if(res.code == 200){
                question.getQuestionList(type,quality,authentication,questionTitle,pageNum).then(()=>{
                    setLabels([])
                })
            }
        }) //调用发布问题的接口  
        form.resetFields()
        setIsView(false) //取消弹窗
      };
    const projectChange = (value:string)=>{
        getTask(value).then(ok=>{
            setTaskList(ok.data)
        })
     }

    useEffect(()=>{
        question.getQuestionList(type,quality,authentication,questionTitle,pageNum)
    },[type,quality,authentication,questionTitle,pageNum])

    return <div className = {style.questionDetail}>
        <div className = {style.head}>
            问答 / 问答列表
        </div>
        <div className = {style.body}> 
            <div className = {style.bodytop}>
                类型：{typeList.map((item)=>{
                    return <span className = {type == item.type?style.active:style.span} key = {item.type} onClick = {()=>{setType(item.type)}}>{item.name}</span>
                })}
            </div>
            <div className = {style.bodybottom}>
            <List
                header={<div className={style.header}>
                    <input type="checkbox" onChange = {()=>{setQuality(quality?'':'1')}}/>仅看精品
                    <input type="checkbox" onChange = {()=>{setAuthentication(authentication?'':'1')}}/>仅看教师认证答案
                    <Search placeholder="搜索问题"  style={{ width: 200 ,outline:'none'}} onSearch={(v)=>{setQuestionTitle(v)}}/>
                    <Button className = {style.questionbutton} type="primary" size={'large'} onClick = {()=>{setIsView(true)}}>+我要提问</Button>
                </div>}
                itemLayout="vertical"
                size="large"
                pagination={{
                    onChange: page => {
                        setPageNum(page)
                    },
                    pageSize: 8,
                    total:question.total
                }}
                dataSource = {question.questionList}
                renderItem={item => (
                    <List.Item
                        key={item.answerId}
                        extra={
                            <Button className = {style.answerbutton} type="primary" size={'large'} onClick = {()=>{props.history.push(`/teachers/answerDetail?answerId=${item.answerId}`)}}>回答</Button>
                        }
                    >   
                        <div className = {style.dd}>
                            <span>{item.qUserName}</span> <span>{item.replyTime}发布</span> <span>实训类型：{judgeType(item.typeNum)}</span>
                            <div><MessageOutlined />{item.answerCount}</div>
                        </div>
                        <div >
                            {item.quality?<img src='http://111.203.59.61:8060/static/img/boutique.fc46be52.svg'/>:<></>}{item.authentication?<img src='http://111.203.59.61:8060/static/img/authentication.c814dd7c.svg' />:<></>}{item.questionTitle}
                        </div>
                        <div style={{color:'#777',height:'20px',overflow:'hidden',display:'flex',justifyContent:'space-between'}}>
                            <div style={{width:'80%'}}>{item.questionContent}</div>
                            <div style={{width:'20%'}}>
                                <a onClick = {(e)=>{(((e.target as HTMLElement).parentNode as HTMLElement).parentNode  as HTMLElement).classList.toggle(style.All);setViewAll(!allView);((e.target as HTMLElement).lastElementChild as HTMLElement).classList.toggle(style.allview) }}>查看全部<DownOutlined /></a>
                            </div>
                        </div>
                        <div>
                            {
                                item.labels.map((item,index)=>{
                                    return <span className = {style.biaoqian} key = {index}>
                                        {
                                            item
                                        }
                                    </span>
                                })
                            }
                        </div>
                    </List.Item>
                )}
                    />
            </div>
        </div>
        <div className = {isView?'mask active':'mask'} onClick = {()=>{setIsView(false)}}>
                <div onClick = {(e)=>{e.stopPropagation()}} style={{padding:'15px'}}>
                    <h4>提问</h4>
                    <Form form={form} onFinish={onFinish} name='demo' initialValues={{ remember: false }}>
                            <p>标题</p>
                        <Form.Item name = 'questionTitle'>
                            <Input placeholder='请输入问题名称'/>
                        </Form.Item>
                        <Form.Item name='type' style = {{width:'200px',display:'inline-block',marginRight:'25px'}}>
                            <Select
                                
                                style = {{width:'200px'}}
                                placeholder='请选择问题类型'
                                onChange={(e)=>{onSelectChange(e as string);setTypeNum(e as string)}}
                                allowClear
                                >
                                <Option value="0">实训</Option>
                                <Option value="1">面试</Option>
                                <Option value="5">工作</Option>
                                <Option value="3">其他</Option>
                            </Select>
                        </Form.Item>
                        <Form.Item shouldUpdate name='text1' style = {{width:'200px',display:'inline-block',marginRight:'25px'}}>
                            {
                               renderInput(typeNum)
                            }
                        </Form.Item>
                            
                        
                        <Form.Item shouldUpdate name='text2' style = {{width:'200px',display:'inline-block',marginRight:'25px'}}>
                            {
                                renderInput2(typeNum)
                            }
                        </Form.Item>
                        <p>描述</p>
                        <Form.Item name='questionContent'>
                            <Editor />
                        </Form.Item>
                        <p>标签</p>
                        <Input placeholder='最多可以输入5个标签,回车添加标签' value = {inputValue} defaultValue='' onChange={(e)=>{setInputValue(e.target.value)}} onPressEnter={(e)=>{e.preventDefault(); //解决antd中 input框 回车触发表单提交
                            if(labels.length == 5){
                                alert('最多添加5个标签')
                            }else{
                                setLabels([...labels,(e.target as HTMLInputElement).value]);
                                setInputValue('')  
                            }
                              
                        }}/>
                            <div style = {{display:"flex",alignItems:'center'}}>
                                {labels.map((item,index)=>{
                                    return <div className={style.labels} key={index}><span >{item}</span><i style={{fontStyle:'normal'}} onClick={()=>{let arr = [...labels];arr.splice(index,1);setLabels(arr)}} >x</i></div>
                                })}
                            </div>
                        <Form.Item >
                            <Button type="primary" htmlType="submit" > {/*点击按钮的时候，可以拿到上面所有<Form.Item>包裹的元素的值*/}
                                发布
                            </Button>
                        </Form.Item>
                    </Form>
                </div>
        </div>
    </div>
}

export default observer(QuestionDetail)
